<template>
  <div style="margin-top: 20px; background: #eee">
    <div>这里是子组件的内容</div>
    <!-- 这里slot表示在父组件中放任意内容显示在此处 -->
    <div>{{ text }}</div>
    <div><slot></slot></div>
    <div>
      <el-button size="small" type="primary" @click="btnClick"
        >通过$emit访问父组件</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: "",
    },
  },
  methods: {
    btnClick() {
      this.$emit("emitTest", "这里可以传入参数");
    },
    childTest(){
         this.$message.success("父组件$refs调用父组件方法");
    }
  },
};
</script>
<style lang="less" scoped>
div {
  color: red;
  margin-bottom: 3px;
}
</style>